Webブラウザ上でストリーミングしながら暗号化・復号したい - Firefox Sendのストリーム暗号化の裏側を活用する

何がしたいか？

なぜストリーミングしながら暗号化したいか？

終わりの決まらないデータの具体例は、通話の音声ストリームなど。

GitHubリポジトリ

https://gh-card.dev/repos/mozilla/send.svg https://github.com/mozilla/send

前置き：ブラウザのエンドツーエンド暗号化事情とか

まず、公式の暗号化の説明として以下の文書が参考になる。

この文書によると、ファイルはAES-GCMで暗号化される。文書途中に出てくるECEは、「Encrypted Content-Encoding」の略だと思われる。ECEは後でファイル名としても出てくる。

app/ece.js

app/streams.js

であった。

GitHubリポジトリ

https://gh-card.dev/repos/nwtgck/aes128gcm-stream-npm.svg https://github.com/nwtgck/aes128gcm-stream-npm

使い方

code:typescript

// Import

import {encryptStream, decryptStream} from 'aes128gcm-stream';

// Create a simple readable

// e.g. (await fetch("...")).body is ReadableStream

const readableStream: ReadableStream<Uint8Array> = ...

// Generate random key

const key: Uint8Array = crypto.getRandomValues(new Uint8Array(16));

// Encrypt

const encryptedStream: ReadableStream<Uint8Array> = encryptStream(

readableStream,

key,

);

// Decrypt

const decryptedStream: ReadableStream<Uint8Array> = decryptStream(

encryptedStream,

key

);

型定義を別途することも考えたが、実装と結びついていない型定義よりも実装に結びつくべきだと思うので、こういう方法をとった。これのデメリットして本家のFirefox Sendの実装に追従するときに面倒になることが考えられる。ただソースコードが2ファイルで行数も多くなく、TypeScriptとJavaScriptは型定義がある・ない意外はとてもdiffが近い。そのため今回はTypeScriptとして管理することに決めた。あと、コードが初見でも読みやすいようにできていた。

テストまわり

個人的に苦労したのはテストの環境を整えること。

ローカルだけのテストでは、使う人にとってライブラリがちゃんと動くのか説得力がない。

テスト環境があらゆる場所で構築できることを示すためにもCIがほしい。

そのためCIでも動くテスト環境の構築が条件。

なるべくなら入り組んだことをせず、ストレートにテストをしたかった。

なぜならテストしたいことはとても明白な内容。「暗号化できるか？」や、「暗号化したものを復号すれば元データと一致するか？」ぐらいである。このプロジェクトに「ボタンをクリックしたとき何かが表示される」のようなUIのテストが入る余地は将来的にない。関数の実行結果をassertするストレートなテストが書きたい。

puppeteerを使ってそのページに訪れるようなことをやっている。とてもきれい書かれている。

以下が実際のテストのコード。